<template>
	<div class="app-container">
		<div class="header">
			<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />日志信息
		</div>
		<div style="text-align: right;">
		<el-button v-if="userStore.$state.roles.some(e => e.includes('1')) && !form.isSendMail" type="warning" size="small" plain @click="toSend()"
			>推送</el-button
		>
		<el-button
			type="warning"
			v-if="form.userCode != userStore.$state.name"
			size="small"
			plain
			@click="pushRecod()"
			>补充</el-button
		>
		<el-button
			type="primary"
			v-if="form.userCode == userStore.$state.name"
			size="small"
			plain
			@click="editRecod()"
			>编辑</el-button
		>
	</div>
		<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
			<el-form-item prop="projectName" label="项目名称">
				<el-input disabled v-model="form.projectName" style="width: 50%; margin-right: 10px" placeholder="请输入项目名称" />
			</el-form-item>
			<el-form-item prop="customerName" label="客户名称">
				<el-input disabled v-model="form.customerName" style="width: 50%; margin-right: 10px" placeholder="请输入客户名称" />
			</el-form-item>

			<el-form-item prop="logStatus" label="标记">
				<el-radio-group disabled v-model="form.logStatus">
					<el-radio v-for="item in log_status" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="logType" label="所属分类">
				<el-select disabled v-model="form.logType" placeholder="请选择分类" style="width: 50%" size="default" clearable>
					<el-option v-for="dict in log_type" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item prop="logCategory" label="类型">
				<el-radio-group disabled v-model="form.logCategory">
					<el-radio v-for="item in log_category" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="logName" label="日志标题">
				<el-input disabled v-model="form.logName" style="width: 50%" placeholder="请输入日志标题" />
			</el-form-item>
			<el-form-item prop="logTime" label="事件时间">
				<el-date-picker
					disabled
					clearable
					v-model="form.logTime"
					style="width: 340px"
					value-format="YYYY-MM-DD HH:mm:ss"
					type="datetime"
					:placeholder="`请选择事件时间`"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="文件上传">
				<el-upload
					disabled
					v-model:file-list="filelist"
					:action="fileUrl"
					ref="upload"
					:headers="token"
					name="files"
					:on-success="handleSuccess"
					:on-remove="handleRemove"
					style="width: 340px"
				>
					<el-button type="primary">上传</el-button>
				</el-upload>
			</el-form-item>
			<el-form-item label="文件下载">
				<el-button type="primary" @click="openLoad">下载</el-button>
			</el-form-item>

			<el-form-item label="图片上传">
				<el-upload
					disabled
					class="avatar-uploader"
					:action="imgUrl"
					ref="upload"
					accept=".jpg,.jpeg,.png"
					list-type="picture-card"
					v-model:file-list="imglist"
					:headers="token"
					name="files"
					:on-success="handleSuccessImg"
					:on-remove="handleRemoveImg"
					:on-preview="handlePictureCardPreview"
				>
					<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
				</el-upload>
			</el-form-item>
			<el-form-item prop="logContent" label="详细内容">
				<div v-html="form.logContent"></div>
			</el-form-item>
			<el-form-item  prop="recommend" label="工作指令">
				<el-input  v-model="form.recommend" :rows="5" type="textarea" placeholder="请输入工作指令" />
			</el-form-item>
		</el-form>
		<div style="line-height: 80px; height: 80px; padding-left: 100px; margin-top: 30px">
			<el-button type="primary" @click="submit">保存</el-button>
			<el-button @click="reback">返回</el-button>
		</div>
		<el-dialog v-model="dialogVisible">
			<img v-full :src="dialogImageUrl" alt="Preview Image" />
		</el-dialog>
		<el-dialog v-model="openL">
			<div
				v-for="(item, index) in dowloadList"
				:key="index"
				style="line-height: 30px; color: rgb(2, 121, 190); cursor: pointer"
				@click="dowloadFile(item)"
			>
				{{ item }}
			</div>
		</el-dialog>
		<el-dialog title="日志推送" v-model="open" width="800px" append-to-body :close-on-click-modal="false" destroy-on-close>
			<el-form ref="baseform" :model="formt" label-position="right" label-width="120px">
				<el-form-item prop="recipientIdList" label="收件人">
				<el-checkbox-group v-model="formt.recipientIdList">
					<el-checkbox v-for="item in listPerson" :key="item.userId" :label="item.userId">{{ item.nickName }}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
				<el-form-item prop="appendContent" label="备注">
					<el-input v-model="formt.appendContent" :rows="5" type="textarea" style="margin-bottom: 5px" placeholder="备注" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<div style="text-align: right">
					<el-button type="primary" @click="submitt">确 定</el-button>
					<el-button
						@click="
							() => {
								open = false
							}
						"
						>取 消</el-button
					>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script setup>
import { reactive } from 'vue'

import { getConfigKey } from '@/api/system/config'
import { getToken } from '@/utils/auth'
import { download } from '@/utils/request'
import { updateLog, selectStaff, logDetail, mailSend } from '@/api/project/project'
import { getPersons } from '@/api/email/email'

import { useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance()
const { log_status, log_type, log_category } = proxy.useDict('log_status', 'log_type', 'log_category')

const userStore = useUserStore()
const tagsView = useTagsViewStore()
const route = useRoute()
const fileUrl = ref('')
const imgUrl = ref('')
const pre = ref('')
const peoples = ref([])
selectStaff({ projectId: route.query.id }).then((res) => {
	peoples.value = res
})
getConfigKey('file_upload').then((response) => {
	fileUrl.value = response.msg
})
getConfigKey('img_upload').then((response) => {
	imgUrl.value = response.msg
})
const init = () => {
	logDetail(route.query.id).then((res) => {
		for (let item in form) {
			form[item] = res.data[item] + ''
		}
		form['imgPaths'] = res.data.imgPaths
		form['recommend'] = res.data.recommend
		form['isSendMail'] = res.data.isSendMail
		if (res.data.imgPaths) {
			for (let item of res.data.imgPaths) {
				imglist.value.push({ name: item, url: pre.value + item })
			}
		}
		form['userCode'] = res.data['createUserCode']
		form['filePaths'] = res.data.filePaths
		if (res.data.filePaths) {
			for (let item of res.data.filePaths) {
				filelist.value.push({ name: item, url: item })
			}
			dowloadList.value = res.data.filePaths
		}
	})
}
getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
	init()
})

const token = { Authorization: 'Bearer ' + getToken() }
const router = useRouter()
const baseform = ref()

const form = reactive({
	logId: '',
	projectId: '',
	projectName: '',
	userCode: '',
	customerName: '',
	logStatus: '',
	logType: '',
	logCategory: '',
	logName: '',
	logTime: '',
	filePaths: [],
	imgPaths: [],
	logContent: '',
	isSendMail: false,
	recommend: ''
})

const rules = {
	projectName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
	logType: [{ required: true, message: '日志类型不能为空', trigger: 'blur' }],
	logName: [{ required: true, message: '日志标题不能为空', trigger: 'blur' }],
	atime: [{ required: true, message: '事件事件不能为空', trigger: 'blur' }],
	logContent: [{ required: true, message: '详细内容不能为空', trigger: 'blur' }],
	userIdList: [{ required: true, message: '发送人不能为空', trigger: 'blur' }],
	logCategory: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
	logTime: [{ required: true, message: '事件时间不能为空', trigger: 'blur' }]
}
const imglist = ref([])
const filelist = ref([])
const dowloadList = ref([])

const handleSuccessImg = () => {
	form.imgPaths = imglist.value.map((e) => {
		return e.response ? e.response.data[0] : e.url.replace(pre.value, '')
	})
}
const handleRemoveImg = () => {
	form.imgPaths = imglist.value.map((e) => {
		return e.response ? e.response.data[0] : e.url.replace(pre.value, '')
	})
}
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleSuccess = () => {
	form.filePaths = filelist.value.map((e) => {
		return e.response ? e.response.data[0] : e.url
	})
}
const handleRemove = () => {
	form.filePaths = filelist.value.map((e) => {
		return e.response ? e.response.data[0] : e.url
	})
}
const handlePictureCardPreview = (uploadFile) => {
	dialogImageUrl.value = uploadFile.url
	dialogVisible.value = true
}
const openL = ref(false)
const openLoad = () => {
	openL.value = true
}

const dowloadFile = (file) => {
	download({ url: file }).then()
}
const submit = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			updateLog(form).then((res) => {
				proxy.$modal.msgSuccess('保存成功！')
				// tagsView.delView(router.currentRoute.value)
				// router.go(-1)
			})
		}
	})
}
const editRecod = () => {
	router.push({
		path: '/project/editLog',
		query: { id: form.logId }
	})
}
const formt = reactive({
	logId: '',
	recipientIdList: [],
	appendContent: ''
})
const toSend = () => {
	open.value = true
	formt.recipientIdList = []
	formt.appendContent = ''
	formt.logId = form.logId
}
const pushRecod = () => {
	router.push({
		path: '/project/editedLog',
		query: { id: form.logId }
	})
}
const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
const open = ref(false)

const listPerson = ref([])
getPersons().then(res => {
	listPerson.value = res

})
const submitt = () => {
	mailSend(formt)
		.then(() => {
			proxy.$modal.msgSuccess('推送成功!')
			open.value = false
		})
		.catch(() => {})
}
</script>
<style lang="scss" scoped>
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
</style>
